<template>
    <div id="pmw_gzgl">
        <!--选项卡插件-->
        <el-tabs id="p_gzgl_box" type="border-card">
            <el-tab-pane label="工资管理">
                <div class="p_table">
                    <el-table
                            :data="searchData"
                            style="width: 100%"
                            :default-sort = "{prop: 'id', order: 'ascending'}"
                            height="500"
                            :stripe=true
                            :border=true
                            :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                            :cell-style="{textAlign:'center'}"
                    >
                        <el-table-column
                                prop="number"
                                label="员工编号"
                                sortable
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="员工姓名"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="baseSalary"
                                sortable
                                label="基础工资"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                prop="performance"
                                sortable
                                label="绩效金"
                                min-width="20%">
                        </el-table-column>
                        <el-table-column
                                label="修改工资信息"
                                min-width="20%">
                            <template slot-scope="scope">
                                <el-button type="text" @click="toChangeWage(scope)">修改</el-button>
                                <!--<el-button
                                        @click.native.prevent="changeWage(scope.row, searchData)"
                                        type="text"
                                        size="small">
                                    修改
                                </el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <!--发放工资按钮-->
            <div id="p_backup_type">
                <el-button type="primary" @click="toSalary">发放工资</el-button>
                <!--交易金额总计-->
                <span class="p_total">金额总计：<span>{{sumMoney}}</span>元</span>
            </div>
        </el-tabs>
        <!--修改框-->
        <el-dialog width="30%" title="修改面板" :visible.sync="form.visible">
            <el-form :model="form">
                <el-form-item label="基础工资" :label-width="form.labelWidth">
                    <el-input type="number" v-model="form.baseSalary"></el-input>
                </el-form-item>
                <el-form-item label="绩效金" :label-width="form.labelWidth">
                    <el-input type="number" v-model="form.performance"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="form.visible = false">取 消</el-button>
                <el-button type="primary" @click="changeWage">确 定</el-button>
            </div>
        </el-dialog>
        <!--搜索框部分-->
        <div class="p_search clear">
            <div><el-input v-model="searchValue" placeholder="请输入员工编号"></el-input></div>
            <div><el-button type="primary" @click="searchPerson">搜索</el-button></div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "pmw_gzgl",
        data() {
            return {
                searchValue: '',
                searchData:[],
                total:0,
                form: {
                    baseSalary:'',
                    performance:'',
                    labelWidth: '80px',
                    visible: false,
                    scope:{},
                },

            }
        },
        methods: {
            toChangeWage(scope){
                this.form.scope=scope;
                this.form.baseSalary=scope.row.baseSalary;
                this.form.performance=scope.row.performance;
                this.form.visible=true;
            },
            changeWage() {
                if(this.form.baseSalary===''||this.form.performance===''){
                    this.$message({
                        type: 'error',
                        message: '修改内容不能为空！！！'
                    });
                    return false
                }
                let data={...this.form.scope.row};
                data.baseSalary=this.form.baseSalary;
                data.performance=this.form.performance;
                axios({
                    url: '/api/rms/finance/salary/updateSalary',
                    method: 'post',
                    params:data,
                    transformRequest:[function () {
                        return JSON.stringify(data)
                    }],
                    headers:{
                        'Content-Type':'application/json;'
                    },
                }).then(res => {
                    if(res.data.code===200){
                        this.form.visible=false;
                        this.searchData[this.form.scope.$index].baseSalary=this.form.baseSalary;
                        this.searchData[this.form.scope.$index].performance=this.form.performance;
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '修改出错！可能是字符长度过长，请刷新页面重试！'
                    });
                });
            },
            searchPerson(){
                if(this.searchValue===''){
                    let data={
                        "currentPage": 1,
                        "pageSize": 10
                    };
                    axios({
                        url: '/api/rms/finance/salary/all',
                        method: 'post',
                        params:data,
                        transformRequest:[function () {
                            return JSON.stringify(data)
                        }],
                        headers:{
                            'Content-Type':'application/json;'
                        },
                    }).then(res => {
                        this.searchData=res.data.info
                    })
                }
                else{
                    let data={
                        "id": this.searchValue,
                    };
                    axios({
                        url: '/api/rms/finance/salary/query',
                        method: 'post',
                        params:data,
                        transformRequest:[function () {
                            return JSON.stringify(data)
                        }],
                        headers:{
                            'Content-Type':'application/json;'
                        },
                    }).then(res => {
                        this.searchData=[];
                        if(res.data.info instanceof Object)this.searchData.push(res.data.info);
                    })
                }
            },
            toSalary(){
                this.$confirm('将为当前所有员工发放工资, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url: '/api/rms/finance/salary/giveout',
                        method: 'get',
                    }).then(res => {
                        if(res.data.code===200)
                            this.$message({
                                type: 'success',
                                message: '发放成功!'
                            });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消发放'
                    });
                });
            },
        },
        computed:{
            sumMoney(){
                this.total=0;
                if(this.searchData.length>0){
                    this.searchData.map(item=>this.total=(this.total*10+Number(item.baseSalary)*10+Number(item.performance)*10)/10)
                }
                return this.total.toFixed(2);
            }
        },
        created() {
            let data={
                "currentPage": 1,
                "pageSize": 10
            };
            axios({
                url: '/api/rms/finance/salary/all',
                method: 'post',
                params:data,
                transformRequest:[function () {
                    return JSON.stringify(data)
                }],
                headers:{
                    'Content-Type':'application/json;'
                },
            }).then(res => {
                this.searchData=res.data.info
            })
        },
    }
</script>

<style scoped lang="less">
    .el-button--primary{
        height: 40px;
        padding: 0 20px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .clear:after{
        content: '';
        clear: both;
        display: block;
    }
    #pmw_gzgl{
        position: relative;
        padding: 20px;
        /*选项卡*/
        #p_gzgl_box{
            .p_table{
                padding:25px 50px;
            }
            #p_backup_type{
                height: 40px;
                margin:0 50px 10px;
                position: relative;
                text-align: right;
                button{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -75px;
                    margin-top: -20px;
                    width: 150px;
                    text-align: center;
                }
                .p_total{
                    line-height: 40px;
                    color: #797d85;
                    span{
                        color: #67C23A;
                        font-weight:bold ;
                        cursor: default;
                    }
                }
            }
        }
        /*搜索框*/
        .p_search{
            position: absolute;
            top: 20px;
            right: 20px;
            padding-right: 5px;
            &>div{
                float: left;
                margin-left: 10px;
            }
            div:first-child{
                width: 130px;
            }
        }
    }
</style>
